<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
    <script>
        function show(e){
            alert("购票")
            e.stopPropagation();
        }
        function gotoDetail() {
            location.href = "detail.html"
        }
    </script>
</head>
<body>
<!--导航区 - star-->
    <div class="nav-bar">
        <ul class="left">
            <li>豆瓣</li>
            <li>读书</li>
            <li>电影</li>
            <li>音乐</li>
            <li>同城</li>
            <li>小组</li>
            <li>阅读</li>
            <li>FM</li>
            <li>时间</li>
            <li>豆品</li>
        </ul>
        <ul class="right">
            <li class="software-box">
                下载豆瓣客户端
                <div class="software">
                    <img src="./imgs/nav_doubanapp_6.png">
                    <div>豆瓣</div>
                    <img src="./imgs/nav_doubanapp_6_qrcode.png">
                    <div>
                        <a href="#">iPhone</a>
                        <span> · </span>
                        <a href="#">Android</a>
                    </div>
                </div>
            </li>
            <li>登录/注册</li>
        </ul>
    </div>
<!--导航区 - end-->
<!-- 搜索区 - star -->
    <div class="search-box">
        <div class="body">
            <div class="left">
                <div class="input">
                    <img src="./imgs/lg_movie@2x.png" alt="">
                    <input type="text" placeholder="搜索电影、电视剧、综艺、影人">
                    <button type="button"></button>
                </div>
                <div class="list-btn">
                    <span>影讯&购票</span>
                    <span>选电影</span>
                    <span>电视剧</span>
                    <span>排行榜</span>
                    <span>影评</span>
                    <span>2022年度榜单</span>
                    <span>2022书影音报告</span>
                </div>
            </div>
            <div class="right">
                <img src="./imgs/annual_2022.png">
            </div>
        </div>
    </div>
<!-- 搜索区 - end -->
<!-- 内容区域 - star-->
    <div class="content">
        <div class="left">
<!--        左侧正文的第一部分-正在热映-->
            <div class="hot">
                <div class="title">
                    <div>
                        <span>正在热映</span>
                        <span>全局正在热映>></span>
                        <span>即将上映>></span>
                    </div>
                    <div>
                        <span>5/7</span>
                        <span><</span>
                        <span>></span>
                    </div>
                </div>
                <div class="list">
                    <div class="item" onclick="gotoDetail()">
                        <img src="./imgs/p2881995796.jpg" alt="">
                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>
                        <div class="source">
                            <span class="img s3"></span>
                            <span>6.4</span>
                        </div>
                        <div class="btn" onclick="show(event)">选座购票</div>
                    </div>
                    <div class="item">
                        <img src="./imgs/p2881995796.jpg" alt="">
                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>
                        <div class="source">
                            <span class="img s3"></span>
                            <span>6.4</span>
                        </div>
                        <div class="btn" onclick="show(event)">选座购票</div>
                    </div>
                    <div class="item">
                        <img src="./imgs/p2881995796.jpg" alt="">
                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>
                        <div class="source">
                            <span class="img s3"></span>
                            <span>6.4</span>
                        </div>
                        <div class="btn">选座购票</div>
                    </div>
                    <div class="item">
                        <img src="./imgs/p2881995796.jpg" alt="">
                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>
                        <div class="source">
                            <span class="img s3"></span>
                            <span>6.4</span>
                        </div>
                        <div class="btn">选座购票</div>
                    </div>
                    <div class="item">
                        <img src="./imgs/p2881995796.jpg" alt="">
                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>
                        <div class="source">
                            <span class="img s3"></span>
                            <span>6.4</span>
                        </div>
                        <div class="btn">选座购票</div>
                    </div>
<!--                    <div class="item">-->
<!--                        <img src="./imgs/p2881995796.jpg" alt="">-->
<!--                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>-->
<!--                        <div class="source">-->
<!--                            <span class="img s3"></span>-->
<!--                            <span>6.4</span>-->
<!--                        </div>-->
<!--                        <div class="btn">选座购票</div>-->
<!--                    </div>-->
<!--                    <div class="item">-->
<!--                        <img src="./imgs/p2881995796.jpg" alt="">-->
<!--                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>-->
<!--                        <div class="source">-->
<!--                            <span class="img s3"></span>-->
<!--                            <span>6.4</span>-->
<!--                        </div>-->
<!--                        <div class="btn">选座购票</div>-->
<!--                    </div>-->
<!--                    <div class="item">-->
<!--                        <img src="./imgs/p2881995796.jpg" alt="">-->
<!--                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>-->
<!--                        <div class="source">-->
<!--                            <span class="img s3"></span>-->
<!--                            <span>6.4</span>-->
<!--                        </div>-->
<!--                        <div class="btn">选座购票</div>-->
<!--                    </div>-->
<!--                    <div class="item">-->
<!--                        <img src="./imgs/p2881995796.jpg" alt="">-->
<!--                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>-->
<!--                        <div class="source">-->
<!--                            <span class="img s3"></span>-->
<!--                            <span>6.4</span>-->
<!--                        </div>-->
<!--                        <div class="btn">选座购票</div>-->
<!--                    </div>-->
<!--                    <div class="item">-->
<!--                        <img src="./imgs/p2881995796.jpg" alt="">-->
<!--                        <div class="name">拯救嫌疑人拯救嫌疑人拯救嫌疑人</div>-->
<!--                        <div class="source">-->
<!--                            <span class="img s3"></span>-->
<!--                            <span>6.4</span>-->
<!--                        </div>-->
<!--                        <div class="btn">选座购票</div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
        <div class="right">asdasdsa</div>
    </div>
<!-- 内容区域 - end-->
</body>
</html>